<template>
  <div class="home-container">
    <hr>
    <h3>知识运用案例: </h3>
    <h5>1.记录鼠标坐标</h5>
    <p>X轴: {{ x }}</p>
    <p>Y轴: {{ y }}</p>
    <hr>
    <h5>2.累加 1 功能</h5>
    <button @click="add">count: {{ count }} | +1</button>
  </div>
</template>

<script>/**
 * 1.记录鼠标坐标
 * 2.累加 1 功能
 */
import {onMounted, onUnmounted, reactive, ref, toRefs} from "vue";

export default {
  name: "HomeWork",
  setup() {
    // 1.1.声明一个响应式数据对象, 包含x和y属性
    const mouseLoc = reactive({
      x: 0,
      y: 0
    })

    // 1.3.指定move函数为事件的对应方法, 在函数中修改坐标
    const move = (e) => {
      mouseLoc.x = e.pageX
      mouseLoc.y = e.pageY
    };

    // 1.2.在组件渲染完毕后, 监听document的鼠标移动事件
    onMounted(() => {
      document.addEventListener('mousemove', move)
    })

    // 1.4.组件销毁时, 删除事件, 这是为什么呢?
    /**
     * 调用原生的addEventListener绑定的话, 需要主动销毁,
     * vue监测不到, 无法移动监听, 我们可以自己销毁
     * Vue本身的有一些绑定监听, 比如v-model、@click、@blur, 这些事件Vue会帮你自动移除
     * #
     * 注意: vue3.0组件事件的销毁时机 onUnmounted === Vue2.0 生命周期钩子 destroyed
     */
    onUnmounted(() => {
      document.removeEventListener('mousemove', move)
    })

    /* -------------------------------------------------------------------- */

    const count = ref(0);
    const add = () => {
      count.value++
    }

    return {
      count,
      ...toRefs(mouseLoc),
      add
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
